<template>
  <div id="PickerView">
    <van-popup position="bottom" v-model="visible" :close-on-click-overlay="false">
      <van-picker
          title="请选择"
          ref="picker"
          show-toolbar
          :value-key="valueKey"
          :columns="columns"
          @confirm="onConfirm"
          @cancel="onCancel"/>
    </van-popup>
  </div>
</template>
<script lang="ts">
import Vue, {ComponentOptions, VueConstructor} from "vue"
import Component from 'vue-class-component'
import {Prop, Ref} from "vue-property-decorator";
import {defaultProp} from "vijay-util";

@Component
export default class PickerView extends Vue implements ComponentOptions<Vue> {
  name = "PickerView";
  columns!: string[];
  visible = false;
  defaultIndex = 0;
  @Ref() picker!: any;
  @Prop(defaultProp('name')) valueKey!: any;

  open(columns, defaultVal) {
    this.columns = columns;
    this.visible = true;
    this.$nextTick(() => this.picker.setColumnIndex(Math.max(this.columns.indexOf(defaultVal), 0)))
  }

  onConfirm(value) {
    console.log(value)
    this.visible = false;
    this.$emit("submit", value)
  }

  onCancel() {
    this.visible = false;
  }
}
</script>

<style scoped lang="scss">
@import "~assets/common.scss";

#PickerView {

}
</style>
